<template>
	<!-- 个人信息页面 -->
	<view class="personal">
		<view class="site-mode">
			<view class="siteAddOrModify-info">
				<view class="title">姓名</view>
				<input class="siteRight" type="text" placeholder="请输入" v-model="personalInfo.realname" />
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">手机号码</view>
				<input class="siteRight" type="text" placeholder="请输入" v-model="personalInfo.telphone" />
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">验证码</view>
				<view class="getset">
					<input class="siteRightCode" type="text" placeholder="请输入" v-model="personCode" />
					<view class="code" v-if="!isWaitingForCode" @tap="getCode">获取验证码</view>
					<view class="code" v-else>{{ countdown }}秒后重新获取</view>
				</view>
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">收货地址</view>
				<picker mode="region" @columnchange="sildeChange" @change="onDateChange" :range="array" :value="region"
					class="multiPicker">
					<view class="getset">
						<view v-if="personalInfo.province==''" class="getSite-title siteRight">选择省市区/县</view>
						<view v-else>{{personalInfo.province}} {{personalInfo.city}} {{personalInfo.county}}</view>
						<view class="icon iconfont icon-xiangyoujiantou"></view>
					</view>
				</picker>
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">详细地址</view>
				<input class="siteRight" type="text" v-model="personalInfo.detail" placeholder="请输入" />
			</view>
		</view>
		<view class="save" @tap="savePersonal">保存</view>
	</view>
</template>

<script>
	import util from '@/component/commen/api/util.js';
	export default {
		data() {
			return {
				personalInfo: "", //个人信息
				// region:[],//选择的地址信息(省、市、区)
				isWaitingForCode: false, // 标志位，表示是否正在等待验证码
				countdown: 0, // 倒计时剩余时间（单位：秒）
				timer: null, // 倒计时的定时器
				personCode:"",//用户输入的验证码
			};
		},
		onShow() {
			this.getUserinfo()
		},
		mounted() {},
		methods: {
			// getCode() { //点击获取验证码
			// 	this.countdown = true
			// 	var params = {
			// 		do: "sendMobile",
			// 		telphone: this.personalInfo.telphone
			// 	}
			// 	util.requestWithSign(params).then(res => {
			// 		console.log("发送验证码返回：", res)
			// 		this.code = res.data
			// 		if (res.errno != 0) {
			// 			return uni.showToast({
			// 				title: res.message,
			// 				icon: "none"
			// 			})
			// 		}
			// 	})
			// },
			getUserinfo() { //获取我的信息
				var params = {
					do: "user",
					uid: uni.getStorageSync("uid")
				}
				util.requestWithSign(params).then(res => { //获取个人信息
					this.personalInfo = res.data
					// console.log("我的信息：",res)
				})
			},
			sildeChange(e) {
				console.log(e)
			},
			onDateChange(e) {
				console.log("选择的地址数据：", e)
				// this.region = e.detail.value
				console.log(this.region)
				this.personalInfo.province = e.detail.value[0]
				this.personalInfo.city = e.detail.value[1]
				this.personalInfo.county = e.detail.value[2]
			},
			savePersonal() {
				const {
					realname,
					telphone,
					province,
					detail
				} = this.personalInfo;
				const {
					personCode,
					code
				} = this;
				
				if (!realname || !realname.trim()) {
					return this.showToast("姓名不能为空！");
				}
				if (!telphone || !telphone.trim()) {
					return this.showToast("请输入手机号！");
				}
				if (!personCode || !personCode.trim()) {
					return this.showToast("请输入验证码！");
				}
				if (personCode !== code) {
					return this.showToast("验证码错误，请重新输入！");
				}
				if (!province || !province.trim()) {
					return this.showToast("请选择地址！");
				}
				if (!detail || !detail.trim()) {
					return this.showToast("请输入详细地址！");
				}
				var params = {
					do: "setuser",
					op: "update",
					uid: uni.getStorageSync("uid"),
					realname: this.personalInfo.realname, //姓名
					telphone: this.personalInfo.telphone, //电话
					province: this.personalInfo.province, //省
					city: this.personalInfo.city, //市
					county: this.personalInfo.county, //区
					detail: this.personalInfo.detail //详细地址
				}
				util.requestWithSign(params).then(res => {
					console.log("返回结果：", res)
					if (res.errno == 0) {
						uni.showModal({
							title: res.message,
							showCancel: false, // 是否显示取消按钮
							success:(res)=>{
								uni.navigateBack()
							}
						})
					}
				})
			},
			showToast(title) {
				uni.showToast({
					title,
					icon: "none"
				});
			},
			async getCode() {
				console.log("点击验证码",this.isWaitingForCode)
				// 如果正在等待验证码，直接返回，防止重复点击
				if (this.isWaitingForCode) {
					return;
				}
				if(this.personalInfo.telphone==""){
					return uni.showToast({
						title:"请先输入手机号！"
					})
				}
				 // 设置倒计时为60秒
				this.countdown = 60;
				 // 开始倒计时
				 this.startCountdown();   
				try {
					var params = {
						do: "sendMobile",
						telphone: this.personalInfo.telphone
					}
					util.requestWithSign(params).then(res => {
						console.log("发送验证码返回：", res)
						
						if (res.errno != 0) {
							return uni.showToast({
								title: "验证码发送失败，请核对手机号重试！",
								icon: "none"
							})
						}
						this.code = res.data
						uni.showToast({
							title:"验证码已发送，请注意查收！"
						})
					})
				} catch (error) {
					uni.showToast({
						title: "验证码发送失败，请重试"
					})
				}
			},
			// 开始倒计时
			startCountdown() {
				this.isWaitingForCode = true; // 设置正在等待验证码的标志位为true

				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--; // 倒计时减1
					} else {
						// 倒计时结束，清除定时器，重置标志位
						clearInterval(this.timer);
						this.timer = null;
						this.isWaitingForCode = false;
					}
				}, 1000); // 每隔1秒执行一次
			},
		}
	}
</script>

<style lang="scss" scoped>
	.personal {
		.site-mode {
			background: #fff;

			.siteAddOrModify-info {
				display: flex;
				align-items: center;
				padding: 30rpx 40rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.title {
					width: 125rpx;
					text-align: justify;
					text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
					text-align-last: justify;
					// border: 1px solid #000;
					margin-right: 25rpx;
				}

				.multiPicker {
					width: 74%;
					// border: 1px solid #000;
				}

				.getset {
					width: 74%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.getSite-title {
						overflow: hidden;
						/* 隐藏超出部分的文本 */
						text-overflow: ellipsis;
						/* 显示省略号 */
						// border: 1px solid #000;
						color: #808080;
					}

					.icon-xiangyoujiantou {
						margin-left: auto;
					}
				}

				.siteRight {
					width: 74%;
					white-space: nowrap;
					/* 让文本在一行内显示 */
					overflow: hidden;
					/* 隐藏超出部分的文本 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					font-size: 28rpx;
				}
				.siteRightCode{
					width:50%;
					// border: 1px solid #000;
				}
				.code {
					font-size: 26rpx;
					// width: 170rpx;
					text-align: center;
					color: #808080;
					padding: 5rpx 10rpx;
					background: #f6f6f6;
					
				}
			}

			.sitedefault {
				//默认地址栏
				justify-content: space-between;
				display: flex;
				align-items: center;
				padding: 15rpx 40rpx;

				.title {
					width: 145rpx;
					// border: 1px solid #f00;
					text-align: justify;
					text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
					text-align-last: justify;
					margin-right: 25rpx;
				}

				switch {
					// --bg-on: #2196F3; /* 设置打开时的背景颜色为蓝色 */
					transform: scale(0.8);
				}
			}
		}

		.save {
			width: 500rpx;
			background: #00b388;
			border-radius: 10rpx;
			padding: 20rpx 0;
			text-align: center;
			margin: 0 auto;
			color: #fff;
			margin-top: 200rpx;
		}
	}
</style>